<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="content-sous">
			<template>
				<u-search
					placeholder="点击搜索商品信息"
					v-model="keyword"
					@blur="custom"
					:showAction="false"
				></u-search>
			</template>
		</view>
		<!-- 切换样式	 -->
		<view class="content-classify">
			<!-- 左侧侧边栏 scroll-y表示得向纵向滚动-->
			<scroll-view scroll-y="true" class="content-classify-left">
				<view
					v-for="(item, index) in FristClass"
					:key="index"
					:class="{
						'left-item': true,
						active: activeindex == index ? true : false
					}"
					@click="changeActive(index)"
				>
					<!-- 左边侧边栏 -->
					{{ item.name }}
				</view>
			</scroll-view>
			<!-- 右边主题内容 -->
			<scroll-view scroll-y="true" class="content-classify-right">
				<!-- 二级分类 -->
				<view class="rigth-Second-1v2">
					<view
						class="rigth-title"
						v-for="(items, index) in SecondClass"
						:key="index"
					>
						<navigator
							:url="
								'../../subpackages/classify/detail?id=' +
									items.id +
									'&title=' +
									items.name
							"
						>
							<view>
								<image :src="items.extra" mode=""></image>
							</view>
							<!-- 二级分类标题 -->
							<view>{{ items.name }}{{ items.id }}</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import {FindeClassify} from "../../network/classify.js";
import Nav from "@/components/top_nav.vue";
export default {
	data() {
		return {
			FristClass: [], //一级分类
			activeindex: 0, //默认选中线条默认为0
			SecondClass: [], //二级分类
			keyword: "" //搜索
		};
	},
	components: {
		Nav
	},
	methods: {
		async getClass() {
			//用户得分类数据
			let res = await FindeClassify();
			this.FristClass = res.data;
			// console.log('一级分类', this.FristClass);
			this.SecondClass = res.data[0].child;
			// console.log("二级分类", this.SecondClass);
		},
		changeActive(index) {
			//
			this.activeindex = index;
			// console.log(this.activeindex);
			// 切换得时候更改二级分类列表
			this.SecondClass = this.FristClass[index].child;
			console.log(this.FristClass[index].child.id);
		},
		custom(keyword) {
			//搜索
			uni.navigateTo({
				url: `/subpackages/classify/detail?keyword=${keyword}`
			});
		}
	},
	onLoad() {
		this.getClass(); //用户分类数据
	}
};
</script>

<style lang="scss">
.content-sous {
	display: flex;
	height: 60px;
	text-align: center;
	align-items: center;
	padding-left: 10px;
}

.content-classify {
	display: flex;

	.content-classify-left {
		height: 100vh;
		width: 300rpx;
		background-color: #f8f8f8;

		.left-item {
			font-size: 12px;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
		}

		.active {
			position: relative;
			display: flex;
			color: red;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			background-color: #fff;
		}

		.active::before {
			//选中线条
			position: absolute;
			display: block;
			content: " ";
			width: 5rpx;
			height: 80rpx;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: red;
		}
	}

	.content-classify-right {
		height: 100vh;
		padding: 20rpx;

		.rigth-Second-1v2 {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			align-items: center;
			justify-content: space-evenly;

			// padding:5px;
			.rigth-title {
				padding-top: 10px;
				font-size: 12px;
				font-weight: bold;

				image {
					padding-top: 10px;
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}
</style>
